<template>
    <van-nav-bar
        title="个人资料"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-image
        round
        width="5rem"
        height="5rem"
        lazy-load
        :src="userInfo.avatar_text?userInfo.avatar_text:'/assets/images/01.jpg'"
        style="display: block; margin: 20px auto;"
    />
    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <!-- 昵称 -->
            <van-field
            v-model="nickname"
            name="nickname"
            label="昵称"
            placeholder="请输入昵称"
            :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <!-- 手机号 -->
            <van-field
            v-model="mobile"
            name="mobile"
            label="手机号"
            placeholder="请输入手机号"
            :rules="mobileRule"
            />
            <!-- 密码 -->
            <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="请输入密码"
            :rules="passwordRule"
            />
            <!-- 邮箱选择 -->
            <van-field
            v-model="email"
            type="email"
            name="email"
            label="邮箱"
            placeholder="请输入邮箱"
            :rules="emailRule"
            />
            <!-- 性别选择 -->
            <van-field name="gender" label="性别" :rules="[{ required: true, message: '请选择性别' }]">
                <template #input>
                    <van-radio-group v-model="gender" direction="horizontal">
                    <van-radio name="0">保密</van-radio>
                    <van-radio name="1">男</van-radio>
                    <van-radio name="2">女</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <!-- 地区选择 -->
            <van-field
                v-model="region"
                is-link
                readonly
                name="region"
                label="地区选择"
                placeholder="点击选择省市区"
                @click="showArea = true"
                />
            <van-popup v-model:show="showArea" position="bottom">
            <van-area
                v-model="region_code"
                :area-list="areaList"
                @confirm="onConfirm"
                @cancel="showArea = false"
            />
            </van-popup>
            <!-- 上传头像 -->  
            <van-field name="avatar" label="上传头像" >
                <template #input>
                  <van-uploader v-model="avatar" multiple :max-count="1"/>
                </template>
            </van-field>
        </van-cell-group>
    <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
        提交
        </van-button>
    </div>
    </van-form>
</template>

<script setup>
    import { areaList } from '@vant/area-data';
    const {proxy} = getCurrentInstance()
    // 获取客户信息
    let userInfo = reactive(proxy.$cookies.get("business")) 
    // 昵称
    const nickname = ref(userInfo.nickname);
    // 手机号
    const mobile = ref(userInfo.mobile)
    // 密码
    const password = ref('');
    // 邮箱
    const email = ref(userInfo.email) 
    // 性别
    const gender = ref(userInfo.gender)
    // 文件列表
    const avatar = ref([])
    // 地区
    const region = ref(userInfo.region_text);
    // if(userInfo.province){
    //     region.code = userInfo.province
    // }
    // if(userInfo.city){
    //     region.code += "/" + userInfo.city
    // }
    // if(userInfo.district){
    //     region.code += "/" + userInfo.district
    // }
    const region_code = ref(userInfo.district || userInfo.city || userInfo.province || "");

    // 表单提交事件
    const onSubmit = async (values) => {
        // 发送请求
        // 先判断是否有图片
        // 封装数据
        let data = {
            id:userInfo.id,
            nickname:nickname.value,
            mobile:mobile.value,
            email:email.value,
            gender:gender.value,
        }
        if(avatar.value.length > 0){
            data.avatar = avatar.value[0].file
        }
        if(password.value){
            data.password = password.value
        }
        if(region.code){
            data[region] = region.code
        }
        let result
        if(data.avatar){
            // 带有图片
            result = await proxy.$UPLOAD({
                url:"/business/profile",
                params:data
            })
        }else{
            // 没有图片
            result = await proxy.$POST({
                url:"/business/profile",
                params:data
            })
        }
        if(result){
            // 修改cookies
            proxy.$cookies.set("business",result.data)
            proxy.$success({
                message:result.msg,
                duration:1000,
                onClose:()=>{
                    proxy.$router.push(result.url)
                }
            })
        }else{
            proxy.$fail(result.msg)
            return false
        }
    };

    // 返回上一个页面事件
    const onClickLeft = () => history.back();

    // 地区选择
    const showArea = ref(false);
    const onConfirm = ({ selectedOptions }) => {
        showArea.value = false;
        region.value = selectedOptions.map((item) => item.text).join('/');
        region.code = selectedOptions.map((item) => item.value).join('/');
    };

    // 表单校验规则
    let passwordRule = [
        {
            pattern:/\w{8,15}$/,message:"密码长度在8到15位之间",validateEmpty:false
        }
    ]

    let emailRule = [
            {
                required:true,message:"请填写邮箱"
            },
            {
                pattern:/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z]{2,6})$/,message:"邮箱格式不正确"
            }
    ]

    let mobileRule = [
        {
            required:true,message:"请填写手机号"
        },
        {
            pattern:/(^1[3|4|5|7|8]\d{9}$)/,message:"手机号格式不正确"
        }
    ]

</script>

<style>
  .preview-cover {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 4px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
  }

</style>